<template>
    <div class="container text-center">
        <div class="row" style="margin-top: 30px;">
          <div class="col-lg-3 col-sm-12">
            <div class="card top_img">
                <div class="card-body">
                    <img :src="$store.state.user.photo" class="img-fluid">
                    <button type="button" class="btn btn-secondary" style="width: 100%;margin-top: 20px;">{{$store.state.user.username}}</button>
                </div>
            </div>
          </div>
          <div class="col-lg-9 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <span class="float-start" style="line-height: 35px; font-weight: bold;font-size: 20px;">我的Bot</span>
                    <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#createBot">创建bot</button>
                    <div class="modal fade" id="createBot" tabindex="-1" aria-labelledby="createBot" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5">创建Bot</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="input-group mb-3">
                                    <span class="input-group-text" >bot名称</span>
                                    <input type="text" class="form-control" placeholder="请输入bot名称" v-model="add_bot.title" >
                                </div>
                                <div class="input-group mb-3">
                                    <span class="input-group-text">bot描述</span>
                                    <textarea class="form-control" rows="3" v-model="add_bot.description" placeholder="请输入bot描述"></textarea>
                                </div>
                                <div style="width: 160px;float: left;margin-right: 395px;" class="input-group mb-3">
                                    <span class="input-group-text">bot代码</span>
                                </div>
                                <div style="width: 210px;" class="input-group mb-3">
                                    <span class="input-group-text">选择主题</span>
                                    <select v-model="theme" class="form-control form-select">
                                        <option value="textmate">textmate</option>
                                        <option value="monokai">monokai</option>
                                        <option value="dracula">dracula</option>
                                    </select>
                                </div>
                                <VAceEditor
                                    v-model:value="add_bot.content"
                                    lang="c_cpp"
                                    :theme="theme"
                                    :options="{fontSize:20}"
                                    style="height: 250px;margin-top: 10px;" />
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary" @click="addBot">提交</button>
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>bot名称</th>
                                <th class="isHidden">bot描述</th>
                                <th>bot代码</th>
                                <th class="isHidden">创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="bot in bots" :key="bot.id">
                                <td>{{bot.title}}</td>
                                <td class="isHidden">{{bot.description}}</td>
                                <td>
                                    <button class="btn btn-info" data-bs-toggle="modal" :data-bs-target="'#getCode'+bot.id">查看代码</button>
                                    <div class="modal fade" :id="'getCode'+bot.id" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                          <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" >Bot代码</h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <span class="input-group-text">bot代码</span>
                                                <VAceEditor 
                                                    ref="code"
                                                    :value="bot.content"
                                                    lang="c_cpp"
                                                    theme="textmate"
                                                    :options="{readOnly:true}"
                                                    style="height: 300px;margin-top: 10px;" />
                                            </div>
                                            <div class="modal-footer">
                                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="isHidden">{{bot.createTime}}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-warning" style="margin-right: 10px;" data-bs-toggle="modal" :data-bs-target="'#updateBot'+bot.id">修改</button>
                                    <div class="modal fade" :id="'updateBot'+bot.id" tabindex="-1" aria-labelledby="updateBot" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                          <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" >修改Bot</h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="input-group mb-3">
                                                    <span class="input-group-text">bot名称</span>
                                                    <input type="text" class="form-control" v-model="bot.title"  >
                                                </div>
                                                <div class="input-group mb-3">
                                                    <span class="input-group-text">bot描述</span>
                                                    <textarea class="form-control" rows="3" v-model="bot.description" ></textarea>
                                                </div>
                                                <span class="input-group-text">bot代码</span>
                                                <VAceEditor
                                                    v-model:value="bot.content"
                                                    lang="c_cpp"
                                                    theme="monokai"
                                                    style="height: 250px;margin-top: 10px;" />
                                            </div>
                                            <div class="modal-footer">
                                              <button type="button" class="btn btn-primary" @click="updateBot(bot)">提交</button>
                                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-danger" @click="deleteBot(bot.id)" >删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import {useStore} from 'vuex';
    import {ref,reactive} from 'vue';
    import {Modal} from 'bootstrap/dist/js/bootstrap';
    import { VAceEditor } from 'vue3-ace-editor';
    import ace from 'ace-builds';
    export default {
        components:{
            VAceEditor
        },
        setup() {
            ace.config.set("basePath", "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
            const store = useStore();
            let bots = ref([]);
            let theme = ref('textmate')
            let add_bot = reactive({
                title:'',
                description:'',
                content:'',
            })
            const getBots = function(){
                $.ajax({
                    type: "post",
                    url: "https://xwjsnakebot.com.cn/api/user/bot/getBots/",
                    headers:{
                        Authorization:'Bearer '+store.state.user.token
                    },
                    success(resp){
                        bots.value = resp;
                    }
                });
            }
            getBots();
            //添加bot
            const addBot = function() { 
                $.ajax({
                    type: "post",
                    url: "https://xwjsnakebot.com.cn/api/user/bot/add/",
                    data: {
                        title:add_bot.title,
                        description:add_bot.description,
                        content:add_bot.content
                    },
                    headers:{
                        Authorization:'Bearer '+store.state.user.token
                    },
                    success(resp) {
                        if(resp.message === 'success'){
                            add_bot.title = "";
                            add_bot.description = "";
                            add_bot.content = "";
                            Modal.getInstance("#createBot").hide()
                            getBots();
                        }else{
                            alert(resp.message)
                        }
                    }
                });
            }
            //删除bot
            const deleteBot = function(id){
                $.ajax({
                    type: "post",
                    url: "https://xwjsnakebot.com.cn/api/user/bot/delete/",
                    data: {
                        id:id
                    },
                    headers:{
                        Authorization:'Bearer '+store.state.user.token
                    },
                    success(resp) {
                        if(resp.message === 'success'){
                            getBots();
                        }else{
                            alert(resp.message)
                        }
                    }
                });
            }
            // 修改bot
            const updateBot = function(bot){
                $.ajax({
                    type: "post",
                    url: "https://xwjsnakebot.com.cn/api/user/bot/update/",
                    data: {
                        id:bot.id,
                        title:bot.title,
                        description:bot.description,
                        content:bot.content
                    },
                    headers:{
                        Authorization:'Bearer '+store.state.user.token
                    },
                    success(resp) {
                        if(resp.message === 'success'){
                            Modal.getInstance("#updateBot"+bot.id).hide()
                            getBots();
                        }else{
                            alert(resp.message)
                        }
                    }
                });
            }
            return {
                theme,
                bots,
                add_bot,
                addBot,
                deleteBot,
                updateBot
            }
        },
    }
</script>

<style scoped>
    @media screen and (max-width: 1000px) and (min-width:360px) {
        div.top_img{
            margin-bottom: 20px;
        }
        table{
            font-size: 12px;
        }
    }
    @media screen and (max-width: 430px) and (min-width: 300px) {
        .isHidden{
            display: none;
        }
    }
    @media screen and (max-width: 590px) and (min-width: 430px){
        .isHidden{
            display: none;
        }
    }
</style>